<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/common/head.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>职位权限管理</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="${resource }/css/bootstrap-select.css" />
		<link rel="stylesheet" href="${resource }/css/bootstrap.css" />
		<script type="text/javascript" src="${resource }/js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="${resource }/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="${resource }/js/bootstrap-select.js"></script>
		<script src="${resource }/js/jquery.form.js"></script>
		<!-- 分页插件，依赖于jquery位于jquery之后 -->
		<script src="${resource }/js/page.js"></script>
		<script type="text/javascript">
			$(window).on('load', function() {
				$('.selectpicker').selectpicker({
					'selectedText' : 'cat'
				});
			});
		</script>
		<link rel="stylesheet" href="${resource }/css/iconfont.css" />
	</head>

	<body style="width:100%;">
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-sm-4">
				<h2>职位权限管理</h2>
				<ol class="breadcrumb">
					<li>
						<a href="index.html">主页</a>
					</li>
					<li>
						<strong>职位权限列表</strong>
					</li>
				</ol>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<!-- 用户列表--bootstrap高级表格使用 -->
				<div class="panel panel-default">
					<div class="panel-heading">
						职位权限列表
					</div>
					<div class="panel-body">
						<!--table-responsive响应式表格，会自动添加滚动条-->
						<div>
							<table class="table">
								<thead>
									<tr>
										<th>职位名称</th>
										<th>权限</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${roles }" var="role">
										<tr class="odd gradeX">
											<td>${role.roleName }</td>
											<td>
												<c:forEach items="${role.permissions }" var="permission2">
													${permission2.permissionName }&nbsp;
												</c:forEach>
											</td>
											<td>
												<a title="修改" class="t-edit " data-toggle="modal" class="t-edit" href="form_basic.html#modal-form2" onclick="editRolePermiss('${role.id}','${role.roleName }')"><i class="iconfont icon-shuru"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;
											</td>
										</tr>
									</c:forEach>
									
									</tbody>
							</table>
							<!--分页显示-->
							<div class="row">
								<div class="col-md-6">
									<div class="pagination" style="margin: 0px;" role="alert" aria-live="polite" aria-relevant="all">显示 1 到 ${role2.getPages()} 页 记录数${role2.getTotal()}</div>
								</div>
								<!-- 动态分页 -->
								<div class="row">
								<div id="page" class="col-md-6" style="text-align: right;float:right;" ></div>
								</div>
							</div>
							<!--分页显示-->
						</div>
					</div>
					<!--表格结束 -->
				</div>
			</div>
			</div>
			<div id="modal-form2" class="modal fade" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-body">
							<div class="row">
								<div class="col-sm-12 b-r">
									<h3 class="m-t-none m-b">修改流程</h3>
									<form role="form" id="editForm" >
										<div class="form-group">
											<label>职位名称：</label>
												<input id="roleId"type="hidden" name="roleId" value="">
												<input id="flowid" type="text" class="form-control" readonly>
											<label>权限：</label>
											<div style="width:100%;">
												<label for="id_select"></label>
												<select id="id_select" name="permissionId" class="selectpicker bla bla bli" multiple="multiple" style="width:100%;" dadata-live-search="true">
													<c:forEach items="${permissions }" var="permission">
														<option value="${permission.id }">${permission.permissionName }</option>
													</c:forEach>
												</select>
											</div>
										</div>
										<div align="center">
											<!--<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登录</strong></button>-->
											<input type="submit"  />
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- Mainly scripts -->
		
	</body>
	<script>
		function editRolePermiss(x,y) {
			var id=x;
			$("#flowid").attr("value", y);
			$("#roleId").attr("value", x);
		}
		//修改操作，提交
		$(function() {
			 // 1.基本参数设置 
		    var eidtos = { 						
		        type: 'POST',     // 设置表单提交方式
		        dataType: 'json', 
		        url: "update.do",    // 设置表单提交URL,默认为表单Form上action的路径
		        success: function(responseText, statusText, xhr, $form){    // 成功后的回调函数
		            if (responseText!="0") {
		                window.location.href="show.do";
		                /* 成功后的操作 */
		            } else {
		                alert("操作失败!");    // 成功访问地址，并成功返回数据，由于不符合业务逻辑的失败
		                window.location.href="show.do";
		            }
		        }
		    }; 
		    // 2.绑定ajaxSubmit()
		    $("#editForm").submit(function(){     // 提交表单的id
		        $(this).ajaxSubmit(eidtos); 
		        return false;   //防止表单自动提交
		    });
		});
	</script>
	<script>
	 $(function(){
			/* 分页插件使用 */
			$("#page").page({/* #page是分页条div的id，调用分页插件page.js中封装的page函数*/
				pageNo:${role2.getPageNo()},/*向page函数传  当前页数，当前页数从controller获取*/
				totalPage:${role2.getPages()},/*向page函数传  总页数，总页数从controller获取*/
				url:"${role2.getUrl()}"/*向page函数传  处理分页的controller地址*/
			});
		}) 
	</script>
</html>